<template>
	<div class="tan-line" :class="{'active':show}">
		<div class="cont">
			<span class="closed"></span>
			<p>
				<span  v-for="(item,index) in serverUrl" :key="index" :data-id="item.id" :data-hlsurl="item.hls">{{item.name}}</span>
			</p>
    </div>
	</div>
</template>

<script>
	import {EventBus} from '@/utils/eventBus'
	export default{
		name:'chooseLine',
		props:{
			serverUrl:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				show:false
			}
		},
		methods:{
			showTan(){
				this.show = !this.show
			},
		},
		mounted(){
			EventBus.$on("showTanLine",()=>{
				this.showTan()
			})
		}
	}
</script>

<style scoped lang="scss">
	@import '@/styles/mixin.scss';
	.tan-line{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 3;
		visibility: hidden;
		overflow: hidden;
		transition: visibility .25s;
		.bg{
			@include bg_cover;
		}
		.cont{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			right: 0;
			background: #fff;
			transform:translateY(100%);
			transition: transform .15s;
		}
	}
	.tan-line.active{
		visibility: visible;
		transition:none;
		.bg{
			opacity: .6;
		}
		.cont{
			transform: translateY(0);
		}
	}
</style>
